<template>
  <div>
    <el-container class="wy_wrap">
      <el-aside width="200px" class="wy_aside"><WyMenu></WyMenu></el-aside>
      <el-container>
          <el-header class="wy_header">
            <h2>欢迎来到我们的XXX系统</h2>
          </el-header>
          <el-main>
            <router-view />
          </el-main>
          <el-footer class="wy_footer">
            <h4>联系人: xxx 备案号: xxx </h4>
          </el-footer>
        </el-container>
    </el-container>
  </div>
</template>

<script>
import WyMenu from './menu'
export default {
  name: 'Index',
  components: {
    WyMenu
  }
}
</script>

<style scoped lang="less">
  @wyborder: 1px solid #999999;
  @headerheight: 60px;
  .wy_wrap {
    height: 100vh;
    .wy_aside{
      border-right: @wyborder;
      overflow-x: hidden;
    }
    .wy_header{
      border-bottom: @wyborder;
      h2{
        height: @headerheight;
        line-height: @headerheight;
      }
    }
    .wy_footer {
      border-top: @wyborder;
      h4{
        height: @headerheight;
        line-height: @headerheight;
      }
    }
  }
</style>
